<template>
  <div class="home">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="v in banners" :key="v.id"
        ><img :src="v.coverImage | dalImg" alt=""
      /></van-swipe-item>
    </van-swipe>
    <van-grid :column-num="3" :icon-size="40">
      <van-grid-item
        v-for="v in categories"
        :key="v.id"
        :icon="v.coverImage | dalImg"
        :text="v.name"
        :to="{ name: 'List', query: { t: v.id } }"
      />
    </van-grid>
    <van-card
      v-for="(v, i) in products"
      :key="v.id"
      :num="v.amount"
      :tag="i + 1 + ''"
      :price="v.price.toFixed(2)"
      :desc="v.desc"
      :title="v.name"
      :thumb="v.coverImage | dalImg"
      :origin-price="(v.price * 1.2).toFixed(2)"
      @click-thumb="toDetail(v)"
    />
  </div>
</template>

<script>
// @ is an alias to /src
import { loadBannersAPI } from "../services/banners";
import { loadCategoriesAPI } from "../services/categories";
import { loadProductsAPI } from "../services/products";
export default {
  name: "HomeView",
  data() {
    return {
      banners: [],
      categories: [],
      products: [],
    };
  },
  created() {
    this.loadBanners();
    this.loadData();
  },
  components: {},
  methods: {
    async loadBanners() {
      const banners = await loadBannersAPI();
      this.banners = banners.data;
    },
    async loadData() {
      const resCategories = await loadCategoriesAPI();
      this.categories = resCategories.data;
      const resProdusts = await loadProductsAPI();
      this.products = resProdusts.data;
    },
    toDetail(v) {
      this.$router.push({
        name: "Detail",
        params: { id: v.id },
      });
    },
  },
};
</script>
<style scoped>
body,
html .van-swipe-item img {
  width: 100vw;
}
</style>
